﻿@page "/treeviews"
@inject IStringLocalizer<TreeViews> Localizer

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<Tips class="mt-3">
    <div><code>Tree</code> @((MarkupString)Localizer["P1"].Value) <code>TItem="TreeFoo"</code></div>
    <ul class="ul-demo mt-3">
        <li>@((MarkupString)Localizer["P2"].Value)</li>
        <li>@((MarkupString)Localizer["P3"].Value)</li>
        <li>@((MarkupString)Localizer["P4"].Value)</li>
        <li>@((MarkupString)Localizer["P5"].Value)</li>
        <li>@((MarkupString)Localizer["P6"].Value)</li>
        <li>@((MarkupString)Localizer["P7"].Value)</li>
        <li>@((MarkupString)Localizer["P8"].Value)</li>
    </ul>
</Tips>

<p>@((MarkupString)Localizer["P9"].Value)</p>
<p>@((MarkupString)Localizer["P10"].Value)</p>
<p>@((MarkupString)Localizer["P11"].Value)</p>
<p>@((MarkupString)Localizer["P12"].Value)</p>

<DemoBlock Title="@Localizer["P13"]" Introduction="@Localizer["P14"]" Name="Normal">
    <p>@((MarkupString)Localizer["P15"].Value)</p>
    <TreeView TItem="TreeFoo" Items="@Items" OnTreeItemClick="@OnTreeItemClick" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["P16"]" Introduction="@Localizer["P17"]" Name="Checkbox">
    <p>
        <div>@((MarkupString)Localizer["P18"].Value)</div>
        <div>@((MarkupString)Localizer["P19"].Value)</div>
    </p>
    <div class="row form-inline">
        <div class="col-12 col-lg-auto">
            <RadioList IsButton="true" @bind-Value="@IsReset" Items="@ResetItems" Color="Color.Success" ShowLabel="true" DisplayText="@Localizer["P20"]"></RadioList>
        </div>
        <div class="col-12 col-lg-auto">
            <Checkbox DisplayText="@Localizer["P21"]" ShowAfterLabel="true" @bind-Value="@AutoCheckChildren" />
            <Checkbox DisplayText="@Localizer["P22"]" ShowAfterLabel="true" @bind-Value="@AutoCheckParent" class="ms-3" />
        </div>
        <div class="col-12 col-lg-auto">
            <Button Text="@Localizer["P23"]" OnClick="OnRefresh" />
        </div>
    </div>
    <TreeView TItem="TreeFoo" Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" IsReset="@IsReset" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent" />
    <BlockLogger @ref="TraceChecked" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["P24"]" Introduction="@Localizer["P25"]" Name="TreeDisable">
    <p>@((MarkupString)Localizer["P26"].Value)</p>
    <TreeView TItem="TreeFoo" Items="@DisabledItems" ShowCheckbox="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P27"]" Introduction="@Localizer["P28"]" Name="AccordionModel">
    <p>@((MarkupString)Localizer["P29"].Value)</p>
    <TreeView TItem="TreeFoo" Items="@GetAccordionItems()" OnExpandNodeAsync="OnExpandNodeAsync" ShowCheckbox="true" IsAccordion="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P30"]" Introduction="@Localizer["P31"]" Name="DefauleExpand">
    <p>
        @((MarkupString)Localizer["P32"].Value)
    </p>
    <TreeView TItem="TreeFoo" Items="@ExpandItems" ShowCheckbox="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P33"]" Introduction="@Localizer["P34"]" Name="TreeDisplayIcon">
    <p>
        @((MarkupString)Localizer["P35"].Value)
    </p>
    <TreeView TItem="TreeFoo" Items="@GetIconItems()" ShowIcon="true" ShowCheckbox="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P36"]" Introduction="@Localizer["P37"]" Name="TreeClickExpand">
    <p>
        @((MarkupString)Localizer["P38"].Value)
    </p>
    <TreeView TItem="TreeFoo" Items="@Items" ShowIcon="true" ShowCheckbox="true" ClickToggleNode="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P39"]" Introduction="@Localizer["P40"]" Name="TreeValidationForm">
    <p>@((MarkupString)Localizer["P41"].Value)</p>
    <ValidateForm Model="@Model">
        <TreeView TItem="TreeFoo" Items="@Items" OnTreeItemClick="@OnTreeItemClick" ShowCheckbox="true" />
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["P42"]" Introduction="@Localizer["P43"]" Name="TreeLazyLoading">
    <p>
        @((MarkupString)Localizer["P44"].Value)
    </p>
    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="@GetLazyItems()" OnExpandNodeAsync="OnExpandNodeAsync" />
</DemoBlock>

<DemoBlock Title="@Localizer["P45"]" Introduction="@Localizer["P46"]" Name="TreeCustomNode">
    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="GetTemplateItems()" />
</DemoBlock>

<DemoBlock Title="@Localizer["P47"]" Introduction="@Localizer["P48"]" Name="TreeNodeColor">
    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="GetColorItems()" />
</DemoBlock>

<DemoBlock Title="@Localizer["P49"]" Introduction="@Localizer["P50"]" Name="CheckedItems">
    <TreeView TItem="TreeFoo" ShowCheckbox="true" Items="@Items" OnTreeItemChecked="@OnTreeItemChecked" />
    <BlockLogger @ref="TraceCheckedItems" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["P51"]" Introduction="@Localizer["P52"]" Name="ShowSkeleton">
    <Button Text="@Localizer["P53"]" IsAsync="true" Icon="fa-solid fa-font-awesome" OnClick="OnLoadAsyncItems" />
    <TreeView TItem="TreeFoo" Items="@AsyncItems" ShowSkeleton="true" OnExpandNodeAsync="OnExpandNodeAsync" class="mt-3" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["P54"]" />
